<!DOCTYPE html>
<html>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/multiline-reverse-wrap-baseline.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
<head><title>CSS Flexbox: multiline reverse wrap baseline.</title>
<link href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property" rel="help">
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/multiline-reverse-wrap-baseline-ref.htm" rel="match">
<meta content="This test ensures that 'flex-wrap: wrap-reverse' flips the cross axis directions and items with baseline alignment are aligned to cross axis start." name="assert">
<style>
.flexbox {
  width: 200px;
  display: flex;
  background-color: #aaa;
  position: relative;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  margin-bottom: 10px;
}
.flexbox > div {
  border: 0;
}

.flexbox :nth-child(1) {
  background-color: lightblue;
}
.flexbox :nth-child(2) {
  background-color: lightgreen;
}
.flexbox :nth-child(3) {
  background-color: pink;
}
.flexbox :nth-child(4) {
  background-color: yellow;
}
</style>
</head><body>

<div class="flexbox">
  <div style="flex: 1 0 100px;">first<br>first<br>first</div>
  <div style="flex: 1 0 100px;">second</div>
  <div style="flex: 1 0 100px; margin-top: 5px">third</div>
  <div style="flex: 1 0 100px;">fourth<br>fourth</div>
</div>

<div class="flexbox">
  <div style="flex: 1 0 100px;">first<br>first<br>first</div>
  <div style="flex: 1 0 100px;">second</div>
  <div style="flex: 1 0 100px;">third</div>
  <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div>
</div>

<div style="width: 300px;" class="flexbox">
  <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div>
  <div style="flex: 1 0 100px;">second</div>
  <div style="flex: 1 0 100px;">third<br>third</div>
</div>



</body>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/multiline-reverse-wrap-baseline.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
</html>